<template>
	<view>
		<view class="control-panel">
			<view class="control-view">
				<view class="kind" v-for="item in viewData" :key="item.key">
					<view class="kind-img">
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="kind-content">{{item.value}}{{item.unit}}</view>
					<view class="kind-title">{{item.label}}</view>
				</view>

			</view>
			<view class="machine-live" :class="machineShow?'down':'up'">
				<view class="machine-live-title">
					<title title="机巢直播" />
					<view><u-icon @click="machineShow=!machineShow" color="black"
							:name="machineShow? 'arrow-down':'arrow-up'"></u-icon></view>
				</view>
				<liveBroadcast />
			</view>
			<view class="drone-live" :class="droneShow?'down':'up'">
				<view class="drone-live-title">
					<title title="无人机直播" />
					<view><u-icon @click="droneShow=!droneShow" color="black"
							:name="droneShow? 'arrow-down':'arrow-up'"></u-icon></view>
				</view>
				<view class="live-control-icon">
					<view class="control-icon-item" @click="toggleCheck(item)" :class="item.check===true?'active':''"
						v-for="item in controlIconList" :key="item.id">
						<image :src="item.iconPath" mode=""></image>
					</view>
				</view>
				<!-- <liveBroadcast /> -->
			</view>
			<view class="control-drone">
				<title title="无人机控制" />
				<view class="control-list">
					<view class="control-item" v-for="item in droneControlList" :key="item.id">
						<view class="item-button" @click="testFn(item)" :class="item.check? 'active':''">
							<image :src="item.check? item.iconActive:item.icon" mode=""></image>
						</view>
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
			<view class="control-machine">
				<title title="机巢控制" />
				<view class="control-list">
					<view class="control-item" v-for="item in machineControlList" :key="item.id">
						<view class="item-button" @click="testFn(item)" :class="item.check? 'active':''">
							<image :src="item.check? item.iconActive:item.icon" mode=""></image>
						</view>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>

		</view>
		{{testF}}
	</view>
</template>

<script>
	// import liveBroadcast from "@/component/liveBroadcast.vue"
	import websocket from "../../websocket/commands.js"
	import {
		stopDownloadingData
	} from "../../api/index.js"
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				machineShow: true,
				droneShow: false,
				// 初始化机巢数据
				initData: {
					currentState: "IDLE",
					currentTransportRate: 0,
					nestStateConstant: "UNKONWN",
					missionExecState: "None",
					aircraftBatteryChargeInPercent: 55,
					satelliteCount: 0,
					aircraftDownLinkSignal: 0,
					aircraftUpLinkSignal: 0,
					insideACTemperature: 0,
					speed: 0,
					rainfall: 0,
					flightMode: "None",
					aircraftAltitude: 0,
					ultrasonicHeightInMeters: 0.0,
					isRemoteControllerConnected: false,
					isAircraftConnected: false,
					motorStatus: {
						liftState: 0,
						chargeState: 0,
						cabinState: 0,
						syncState: 0,
						gatherStatus: 0
					},
					transportedSize: "0%",
					lightstatus: 0,
					isCurrentOverloaded: false,
					isOverHeated: false,
					isLowTemperature: false,
					isShortCircuited: false,
					isCustomDischargeEnabled: false,
					lowVoltageCellIndex: -1,
					damagedCellIndex: -1,
					numberOfDischarges: 0,
					aircraftBatteryCurrentTemperature: 0,
					aircraftBatteryCurrentVoltage: 0,
					isBatteryConnected: "NORMAL",
					remainingChargeInmAh: 0,
					remainingChargeInPercent: 0,
					isCharging: false,
					aircraftVSpeed: 0,
					aircraftHSpeed: 0,
					areMotorsOn: false,
					aircraftPitch: 0,
					aircraftRoll: 0,
					aircraftYaw: 0,
					aircraftLocationLatitude: 0,
					aircraftLocationLongitude: 0,
					aircraftFlyInSecond: 0,
					aircraftStateConstant: "",
					currentMissionID: "",
					ChargerStatus: 0,
					homeLocationLatitude: 0,
					homeLocationLongitude: 0,
					execMissionID: "",
					virtualStickState: false,
					currentCameraMode: "None",
					isLiveStreaming: false,
					rtkStatus: false,
					gimbal: {
						gimbalPitch: 0,
						gimbalYaw: 0,
						gimbalRoll: 0
					},
					totalFileNum: 0,
					failedNum: 0,
					Temperature: 0,
					weather: {
						WindSpedd: 0,
						CurrRainSnowStatu: 0
					}
				},
				viewData: [{
						id: 0,
						label: "风速",
						unit: "m/s",
						icon: '/static/svg/windSpeed.svg',
						value: 4
					}, {
						id: 1,
						label: "雨量",
						unit: "mm",
						icon: '/static/svg/hyetal.svg',
						value: 5.2
					}, {
						id: 2,
						label: "湿度",
						unit: "%",
						icon: '/static/svg/humidness.svg',
						value: 6.1
					},

				],
				droneControlList: [{
					id: 0,
					name: '无人机',
					check: false,
					text: "未连接",
					icon: '/static/svg/drone.svg',
					iconActive: '/static/svg/drone-active.svg'
				}, {
					id: 1,
					name: '遥控器',
					check: false,
					text: "未连接",
					icon: '/static/svg/telecontrol.svg',
					iconActive: '/static/svg/telecontrol-active.svg'
				}, {
					id: 2,
					name: '充电',
					check: false,
					text: "未充满",
					icon: '/static/svg/charging.svg',
					iconActive: '/static/svg/charging-active.svg'
				}, {
					id: 3,
					name: '下载数据',
					check: false,
					text: "未连接",
					icon: '/static/svg/download.svg',
					iconActive: '/static/svg/download-active.svg'
				}, {
					id: 4,
					name: '格式化SD卡',
					text: '格式化SD卡',
					check: false,
					icon: '/static/svg/formatting.svg',
					iconActive: '/static/svg/formatting-active.svg'
				}, {
					id: 5,
					name: '数据采集',
					check: false,
					text: "数据采集",
					icon: '/static/svg/gather.svg',
					iconActive: '/static/svg/gather-active.svg'
				}, {
					id: 6,
					name: '光谱',
					text: "多光谱",
					check: false,
					icon: '/static/svg/multispectral.svg',
					iconActive: '/static/svg/multispectral-active.svg'
				}],
				machineControlList: [{
					id: 0,
					name: "一键启动",
					check: false,
					icon: '/static/svg/activate.svg',
					iconActive: '/static/svg/activate-active.svg'
				}, {
					id: 1,
					name: "一键回收",
					check: false,
					icon: '/static/svg/recycle.svg',
					iconActive: '/static/svg/recycle-active.svg'
				}, {
					id: 2,
					name: "舱门",
					check: false,
					icon: '/static/svg/gate.svg',
					iconActive: '/static/svg/gate-active.svg'
				}, {
					id: 3,
					name: "夹具",
					check: false,
					icon: '/static/svg/jig.svg',
					iconActive: '/static/svg/jig-active.svg'
				}, {
					id: 4,
					name: "终止自动回收",
					check: false,
					icon: '/static/svg/Terminate.svg',
					iconActive: '/static/svg/Terminate-active.svg'
				}],
				controlIconList: [{
					id: 0,
					name: "拍照",
					iconPath: require('@/static/svg/drone-photograph.svg'),
					check: false
				}, {
					id: 1,
					name: "录像",
					iconPath: require('@/static/svg/drone-video.svg'),
					check: false
				}, {
					id: 2,
					name: "紧急停止",
					iconPath: require('@/static/svg/drone-attention.svg'),
					check: false
				}, {
					id: 3,
					name: "返航",
					iconPath: require('@/static/svg/drone-back.svg'),
					check: false
				}, {
					id: 4,
					name: "推流",
					iconPath: require('@/static/svg/drone-flow.svg'),
					check: false
				}, {
					id: 5,
					name: "摇杆",
					iconPath: require('@/static/svg/drone-rocker.svg'),
					check: false
				}],
			};
		},

		computed: {
			...mapState(['mechineEvent']),
			updateData() {
				let id = this.mechineEvent.nestId ? this.mechineEvent.nestId : '02d576bd-b12e-4a77-9f4e-c536dc6dde28'
				let data = this.$store.state.nest.mqttData[id]
				for (let attr in data) {
					this.initData[attr] = data[attr]
				}
				return this.initData
			},
			controlList() {
				let {
					virtualStickState, // 虚拟摇杆
					isLiveStreaming, // 推流
					currentCameraMode // 拍照
				} = this.initData
				console.log(currentCameraMode, 'currentCameraMode')
				this.controlIconList[4].check = isLiveStreaming
				this.controlIconList[5].check = virtualStickState
			},
			controlData1() {
				// 无人机连接 
				if (this.initData.isAircraftConnected) {
					this.droneControlList[0].check = true
					this.droneControlList[0].text = "已连接"
				} else {
					this.droneControlList[0].check = false
					this.droneControlList[0].text = "未连接"
				}
				// 遥控器
				if (this.initData.isRemoteControllerConnected) {
					this.droneControlList[1].check = true
					this.droneControlList[1].text = "已连接"
				} else {
					this.droneControlList[1].check = false
					this.droneControlList[1].text = "未连接"
				}
				// 充电
				switch (this.initData.ChargerStatus) {
					case 0:
						this.droneControlList[2].text = "未充电";
						this.droneControlList[2].check = false;
						break;
					case 1:
						this.droneControlList[2].text = "充电准备";
						this.droneControlList[2].check = true;
						break;
					case 2:
						this.droneControlList[2].text = "关机充电";
						this.droneControlList[2].check = true;
						break;
					case 3:
						this.droneControlList[2].text = "开机充电";
						this.droneControlList[2].check = true;
						break;
					case 4:
						this.droneControlList[2].text = "充电完成";
						this.droneControlList[2].check = true;
						break;
					case 8:
						this.droneControlList[2].text = "故障";
						this.droneControlList[2].check = false;
						break;
				}

				switch (this.initData.currentState) {
					case "IDLE":
						this.droneControlList[3].text = "空闲";
						this.droneControlList[3].check = false;
						break;
					case "Downloading":
						this.droneControlList[3].text = "下载中";
						this.droneControlList[3].check = true;
						break;
					case "Uploading":
						this.droneControlList[3].text = "上传中";
						this.droneControlList[3].check = true;
						break;
					case "Formatting":
						this.droneControlList[3].text = "格式化中";
						this.droneControlList[3].check = false;
						break;
					case "Deleting":
						this.droneControlList[3].text = "清除中";
						this.droneControlList[3].check = false;
						break;
				}

				let WindSpedd = this.initData?.weather.WindSpedd
				let CurrRainSnowStatu = this.initData?.weather.CurrRainSnowStatu
				let Temperature = this.initData?.Temperature

				this.viewData[0].value = WindSpedd
				this.viewData[1].value = CurrRainSnowStatu
				this.viewData[2].value = Temperature

			},
			testF() {
				console.log(this.$store.state.smartFlight.gvaNestInfoList, 'testF')
				return 123
			}

		},
		components: {
			// liveBroadcast
		},
		methods: {
			toggleCheck(item) {
				console.log(item.name, "item")
				let text = item.check ? `关闭${item.name}吗` : `开启${item.name}吗`
				uni.showModal({
					title: `确认${text}`,
					success: (res) => {
						if (res.confirm) {

							this.websocketController(item.name, item.check)
						} else {
							// 取消逻辑
						}
					}
				})

			},
			toggleLiveCheck(obj) {
				// obj.check = !obj.check
				this.$store.commit('changeControlIconList', obj.id)
			},
			testFn(item) {
				console.log(item.name)
				let text;
				if (item.name === "光谱") {
					text = `切换光谱吗`
				} else {
					text = item.check ? `关闭${item.name}吗` : `开启${item.name}吗`
				}
				uni.showModal({
					title: `确认${text}`,
					success: (res) => {
						if (res.confirm) {
							// 确认逻辑
							if (item.name === "光谱") {
								switch (item.text) {
									case "多光谱":
										this.websocketController("光谱", false, "多光谱");
										item.text = "红外光";
										break;
									case "红外光":
										this.websocketController("光谱", false, "红外光");
										item.text = "可见光";
										break;
									case "可见光":
										this.websocketController("光谱", false, "可见光");
										item.text = "多光谱";
										break;
								}
							} else {
								this.websocketController(item.name, item.check)
							}
						} else {
							// 取消逻辑
						}
					}
				})

			},
			websocketController(name, state, text = "", openSnackbar = true) {
				let isNoCommend = false;
				let downloadDataStatue = -1;
				let downloadDataStatueText = "";
				let emergencyStop = -1;
				let controllerID = this.mechineEvent.nestId ? this.mechineEvent.nestId :
					'02d576bd-b12e-4a77-9f4e-c536dc6dde28'
				this.$store.dispatch("commandStatus/deleteCommandCode");
				switch (name) {
					case "无人机":
						websocket.powerOnDrone(controllerID);
						break;
					case "遥控器":
						websocket.powerOnRemoteControl(controllerID);
						break;
					case "充电":
						state ? websocket.chargeOFF(controllerID) : websocket.chargeON(controllerID);
						break;
					case "下载成果":
					case "下载数据":
						api.downloadData(controllerID).then(
							(res) => {
								if (res.data.errcode === 200) downloadDataStatue = 1;
							},
							(res) => {
								downloadDataStatue = 0;
								downloadDataStatueText = res.response.data.errmsg;
							}
						);
						break;
					case "格式化SD卡":
						websocket.formatSDCard(controllerID);
						break;
					case "停止下载数据":
						stopDownloadingData(controllerID).then(res => {
							console.log(res.data);
						});
						break;
					case "数据采集":
						isNoCommend = true;
						break;
					case "一键启动":
						isNoCommend = true;
						break;
					case "一键回收":
						websocket.closeGather(controllerID);
						const timer = setTimeout(() => {
							websocket.closeCabin(controllerID);
							clearTimeout(timer);
						}, 20000);
						break;
					case "舱门":
						if (state) {
							websocket.closeCabin(controllerID);
						} else {
							websocket.openCabin(controllerID);
						}
						break;
					case "夹具":
						if (state) {
							websocket.closeGather(controllerID);
						} else {
							websocket.releaseGather(controllerID);
						}
						break;
					case "终止自动回收":
						isNoCommend = true;
						break;
					case "重置服务器":
						isNoCommend = true;
						break;
					case "终止任务":
						websocket.terminateCurrentMissionAndReturn(controllerID);
						break;
					case "返航":
					case "一键返航":
						websocket.returnToHome(controllerID);
						break;
					case "拍照":
						// dialogInformation.stateText = "拍照";
						websocket.takePhoto(controllerID);
						break;
					case "推流":
						if (state) {
							websocket.stopStream(controllerID);
						} else {
							websocket.openStream(controllerID);
						}
						break;
					case "摇杆模式":
						if (state) {
							websocket.disableVirtualStickMode(controllerID);
						} else {
							websocket.enableVirtualStickMode(controllerID);
						}
						break;
					case "录像":
						if (state) {
							websocket.stopRecord(controllerID);
						} else {
							websocket.startRecord(controllerID);
						}
						break;
					case "紧急停止":
						emergencyStop = 1;
						websocket.emergencyStop(controllerID);
						break;

					case "光谱":
						// dialogInformation.stateText = "切换光谱";

						if (text.indexOf("多光谱") != -1) {
							websocket.settingLightMode("MULTISPECTRAL_MSX", controllerID);
						} else if (text.indexOf("红外光") != -1) {
							websocket.settingLightMode("MSX", controllerID);
						} else if (text.indexOf("可见光") != -1) {
							websocket.settingLightMode("VISUAL_ONLY", controllerID);
						}
						break;
				}
				setTimeout(() => {
					if (openSnackbar) {
						const commandCodeList = this.$store.state.commandStatus.commandCodeList;

						if (emergencyStop === 1 && commandCodeList.length <= 4) {
							uni.showToast({
								icon: "none",
								title: "开启成功"
							})
							this.$store.dispatch("commandStatus/deleteCommandCode");
							return;
						}

						if (downloadDataStatue === 1) {
							uni.showToast({
								icon: "none",
								title: "下载成功"
							})
							this.$store.dispatch("commandStatus/deleteCommandCode");
							return;
						} else if (downloadDataStatue === 0) {
							uni.showToast({
								icon: "none",
								title: "下载失败"
							})
							this.$store.dispatch("commandStatus/deleteCommandCode");
							return;
						}

						if (commandCodeList.length === 0 && !isNoCommend) {
							// 成功
							uni.showToast({
								icon: "none",
								title: "开启成功"
							})
						} else {
							// 失败
							uni.showToast({
								icon: "none",
								title: "开启失败"
							})
						}
					}

					this.$store.dispatch("commandStatus/deleteCommandCode");
				}, 2000);
			}

		}
	}
</script>

<style lang="scss">
	.control-panel {
		margin: 20rpx 40rpx 20rpx;
		padding-bottom: 20rpx;

		.control-view {
			box-shadow: 0px 3px 8px 0px #00000040;
			width: 100%;
			height: 200rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 50rpx;
			box-sizing: border-box;

			.kind {
				width: 120rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.kind-img {
					height: 70rpx;
					width: 70rpx;

					>image {
						width: 100%;
						height: 100%;
					}
				}

				.kind-content {
					font-size: 30rpx;
				}
			}
		}

		.machine-live.down {
			height: 458rpx;
		}

		.drone-live.down {
			height: 532rpx;
		}

		.machine-live,
		.drone-live {
			margin-top: 20rpx;
			width: 100%;
			box-shadow: 0px 3px 8px 0px #00000040;
			transition: .3s;
			height: 90rpx;
			overflow: hidden;

			&.up {
				height: 90rpx;
			}


			.machine-live-title,
			.drone-live-title {
				width: 100%;
				padding: 0 20rpx;
				box-sizing: border-box;
				height: 90rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.live-control-icon {
				height: 74rpx;
				width: 100%;
				box-sizing: border-box;
				padding: 0 20rpx;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;

				.control-icon-item {
					width: 60rpx;
					height: 60rpx;
					background-color: $color-blue;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					transition: .3s;

					&.active {
						background-color: $color-green;
					}

					>image {
						width: 60%;
						height: 60%;
					}
				}
			}
		}

		.control-drone,
		.control-machine {
			width: 100%;

			.control-list {
				display: flex;
				flex-wrap: wrap;

				.control-item {
					width: 146rpx;
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: space-between;
					height: 120rpx;
					font-size: 24rpx;
					margin-left: 29rpx;
					margin-bottom: 34rpx;

					&:nth-child(4n+1) {
						margin-left: 0rpx;
					}

					&:nth-child(n+4) {
						margin-bottom: 0rpx;
					}

					.item-button {
						width: 100%;
						height: 70rpx;
						box-shadow: 0px 3px 8px 0px #00000040;
						border-radius: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						transition: .3s;

						&.active {
							background: $color-green;
						}

						>image {
							height: 48rpx;
							width: 48rpx;
						}
					}
				}
			}
		}
	}
</style>